import React,{useEffect,useState,useRef} from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,Image,
    TouchableWithoutFeedback, TextInput,
} from 'react-native';
import Header from '../../widgets/Header';
import {getffly} from '../../utils/common';
import screen from '../../utils/screen';
import {useStores} from '../../store';
import {observer} from 'mobx-react';
import {LGBtn} from '../../widgets/buttons';
import RequestUtil from '../../utils/RequestUtil';
import Api from '../../utils/Api';
import {AppModal} from '../../widgets/modal';
import AppEvent from '../../utils/AppEvent';
import Constants from '../../utils/Constants';
import Images from '../../images/Images';
import LogoutAlert from '../../components/LogoutAlert';
import VerifyDialog from '../../components/VerifyDialog';


export default observer( ({navigation})=>{


    const {userStore} = useStores()
    const logoutAlert = useRef()
    const verifyDialog = useRef()
    // const {data} = navigation.state.params
    const [phone,setPhone] = useState('')
    const [withdraw,setWithdraw] = useState(null)

    useEffect(()=>{
        console.log('Setting',userStore)

        const {mobile} = userStore.userInfo
        setPhone(mobile)
        getWithdraw()
    },[])

    const getWithdraw = ()=>{

        AppModal.showLoading();

        RequestUtil.get(Api.withdrawSet).then(res=>{

            let data = res.data
            console.log('提现',data)
            AppModal.hideTip()

            setWithdraw(data)
        },error=>{
            AppModal.hideTip()
            if(error.code === -111){
                AppModal.showError(error.msg)
            }else{
                AppModal.showError(error.msg)
            }
            console.log('widthdraw error',error)
        })

    }


    const logout = ()=>{
        AppModal.showLoading()
        RequestUtil.post(Api.logout).then(res=>{
            AppModal.hideTip()
            userStore.logout()
            navigation.navigate('Home')
        },error=>{
            AppModal.hideTip()

        })

    }


    return (
        <View style={styles.container}>

            <Header title={Constants.account.setting} navigation={navigation}/>

            <ScrollView contentContainerStyle={styles.content}>

                <Text style={{fontSize: 12,color:'#000',marginTop: screen.PIXEL_30}}>{Constants.account.mobile_number}</Text>

                <TouchableWithoutFeedback
                    onPress={()=>{
                        verifyDialog.current.show(phone,()=>{

                        })
                    }}
                >
                    <View style={styles.row}>
                        <Text style={styles.leftText}>{phone}</Text>
                        <Image source={Images.right} resizeMode={'contain'} style={styles.right}/>
                    </View>
                </TouchableWithoutFeedback>


                <Text style={{fontSize: 12,color:'#000',marginTop: screen.PIXEL_40}}>{Constants.account.password}</Text>

                <TouchableWithoutFeedback
                    onPress={()=>{
                        navigation.push('RetrievePsw',{mobile:phone})
                    }}
                >
                    <View style={styles.row}>
                        <Text style={styles.leftText}>{Constants.account.reset}</Text>
                        <Image source={Images.right} resizeMode={'contain'} style={styles.right}/>
                    </View>
                </TouchableWithoutFeedback>

                <Text style={{fontSize: 12,color:'#000',marginTop: screen.PIXEL_40}}>{Constants.account.withdrawal_account}</Text>

                <TouchableWithoutFeedback
                    onPress={()=>{
                        navigation.push('WithdrawSet',{withdrawal:withdraw})
                    }}
                >
                    <View style={styles.row}>
                        <Text style={[styles.leftText]}>{withdraw  ? withdraw.account : 'Not set'}</Text>
                        <Image source={Images.right} resizeMode={'contain'} style={styles.right}/>
                    </View>
                </TouchableWithoutFeedback>

                <LGBtn
                    style={{width:'100%',height:screen.PIXEL_90,marginTop:screen.PIXEL_60}}
                    title={Constants.account.logout}
                    onPress={()=> {
                        logoutAlert.current.show(logout)
                    } }
                />

            </ScrollView>

            <LogoutAlert
                ref={logoutAlert}
            />

            <VerifyDialog
                ref={verifyDialog}
            />

        </View>
    )
})

const styles= StyleSheet.create({
    container:{
        flex:1
    },
    content:{
        flex:1,
        paddingHorizontal:screen.PIXEL_60
    },
    row:{
        height: screen.PIXEL_80, width: '100%',flexDirection:'row',alignItems: 'center',
        justifyContent: 'space-between',borderBottomWidth:1,borderBottomColor:'rgba(32,32,32,0.3)'
    },
    leftText:{
        fontFamily:getffly("bold"), color: '#377C74',
        textAlign: 'center', padding: 0, fontSize: 20,
        // '#A6C4C3'
    },
    right:{
        width:screen.PIXEL_30,height:screen.PIXEL_30
    }

})
